<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>模型管理</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    .s-tit {
      padding: 30px 30px;
    }
    .data-m {
      padding: 0 30px 30px 30px;
      position: relative;
    }
    .f-query {
      padding-top: 26px;
    }
    
    
    
    .query-head {
      display: flex;
      margin-bottom: -3px;
    }
    .date-pick-fix {
      width: 285px;
      height: 30px;
      line-height: 27px;
      display: flex;
      border-radius: 3px;
      border: 1px solid #eee;
      overflow: hidden;
      margin-right: 30px;
      margin-top: 28px;
    }
    .date-pick-fix li {
      flex: 1;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 3px;
      cursor: pointer;
    }
    .date-pick-fix li:nth-child(odd) {
      background: #f3f4f4;
    }
    .date-pick-fix li.on {
      background: #0e9cf2;
      color: #fff;
    }
    .f-query {
      flex: 1;
      margin-bottom: 5px;
    }
    .lsb .ivu-form-item-label {
      margin-top: 2px;
    }
    .ivu-table-tbody .my-row-active td {
      background-color: #f0f8fc;
    }
    .ivu-table-cell > span,
    .ivu-table-cell > div {
      color: #999;
    }
    .ivu-btn {
      font-size: 14px;
    }
    
    
    
    
    
    
    
    .modal .ivu-modal-header-inner,
    .modal .ivu-modal-header-inner,
    .modal .ivu-modal-header-inner {
      text-align: center;
      font-size: 16px;
      font-weight: normal;
      color: #999;
      padding: 15px 0 31px 0;
    }
    .modal .ivu-modal-footer,
    .modal .ivu-modal-footer,
    .modal .ivu-modal-footer {
      border-top: 0;
      margin: -10px;
    }
    
    
    .modal .ivu-modal-header-inner {
      text-align: left;
      color: #666;
    }
    .modal .ivu-modal-header {
      border-bottom: 2px solid #eee;
      padding-left: 26px;
    }
    .cun-m {
      font-size: 14px;
      color: #666;
      position: absolute;
      top: 16px;
      right: 30px;
    }
    .cun-m .ls {
      color: #0e9cf2;
    }
    .py1 {
      color: #333;
      text-align: center;
      font-size: 16px;
      margin-bottom: 63px;
      margin-top: 43px;
    }
    .m-btn {
      display: flex;
      justify-content: center;
      align-content: space-between;
    }
    .m-btn .cbtn {
      width: 110px;
      height: 40px;
      border: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
      padding: 0 10px;
      margin: 0 60px;
    }
    .m-btn .cancel-btn {
      color: #999;
      background: #eeeeee;
    }
    .m-btn .cancel-btn:hover {
      border: 0;
    }
    .destroy-btn {
      background: #f2880f;
    }
    .ivu-table-column-center {
      position: relative;
    }
    .ivu-checkbox-wrapper::after {
      content: '';
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      margin: auto;
    }
    
    .ivu-table-row.my-row-active .ivu-table-cell > span,
    .ivu-table-row.my-row-active .ivu-table-cell > div {
      color: #0e9cf2;
    }
    
    .fm1 {
      padding-top: 0;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
      margin-bottom: 27px;
    }
    .down-model-btn,
    .down-log-btn,
    .destroy-btn {
      padding: 0 11px 1px 11px;
      border-radius: 2px;
    }
    .ivu-btn.reset-btn {
      border-radius: 2px;
      padding: 6px 17px;
    }
    
    td.axps {
      cursor: pointer;
      transition: .001s !important;
    }
    td.axps:hover {
      color: #fff;
      background: #0e9cf2;
    }
    td.axps:hover * {
      color: #fff !important;
    }
    .modal2 .ivu-modal-body {
      padding: 24px 27px 16px 27px;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="modelManage">
    <div class="main">
      <!-- <section class="panel s-tit mb20">
        <p class="mb20">温馨提示</p>
        <p class="tishi">1.模型生成规则：完成训练 或 终止训练（终止时，训练时长须 >= 1小时）</p>
      </section> -->

      <section class="panel data-m">
        <!-- <div class="cun-m">
          <span class="mr10 hong pgy" v-if="isStorageLack">储存空间不足</span>
          储存空间 : <span class="ls">{{getFormtStorageSize}}</span> / <span class="ls">10 G</span>
        </div> -->
        <div class="query-head">
          <ul class="date-pick-fix">
            <li :class="{on : dateActive === index}" @click="choseTabDate(index)" v-for="(item, index) of dateChose"
              :key="index">{{item}}</li>
          </ul>
          <i-form class="f-query" :model="query" label-position="right" inline @keyup.enter.native="clickQuery">
            <form-item class="lsb w280" label="日期查询 : ">
              <date-picker class="w200" type="daterange" placement="bottom-center" placeholder="请选择日期查询" @on-change="setDateRange"
                v-model="query.cTime"></date-picker>
            </form-item>
            <form-item>
              <i-button type="primary" class="sb-btn" @click="clickQuery">查询</i-button>
              <!-- <i-button type="reset" class="reset-btn">重置</i-button> -->
            </form-item>
          </i-form>
        </div>

        <i-form class="f-query fm1" :model="query" label-position="right" inline @keyup.enter.native="requestList">
          <form-item class="w230" label="任务编号 : ">
            <i-input class="w150" clearable placeholder="请输入任务编号" v-model="query2.taskId"></i-input>
          </form-item>
          <form-item class="w230" label="训练编号 : ">
            <i-input class="w150" clearable placeholder="请输入训练编号" v-model="query2.trainingCode"></i-input>
          </form-item>
          <form-item>
            <i-button type="primary" class="sb-btn" @click="clickQuery2">查询</i-button>
            <i-button type="reset" class="reset-btn" @click="formReset">重置</i-button>
          </form-item>
        </i-form>

        <i-form class="data-ctr" inline>
          <form-item>
            <i-button class="down-model-btn" type="primary" @click="downModel" :disabled="!isDownModel">下载模型</i-button>
            <i-button class="down-log-btn" type="primary" @click="downLog" :disabled="!isDownLog">下载日志</i-button>
            <i-button class="destroy-btn" type="warning" @click="showModal1" :disabled="!isDelData">销毁数据</i-button>
          </form-item>
        </i-form>

        <i-table class="mb10" :class="{loading: tbLoading}" :columns="columns1" :data="list" size="small" border ref="selection" :row-class-name="trActive" @on-selection-change="changeTable" no-data-text="没有相关数据"></i-table>
        <div class="page-w" v-if="dataTotal > 0">
          <Page :total="dataTotal" :page-size="pageSize" :current="currentPage" @on-change="changePage" show-total
            show-elevator />
        </div>
      </section>

      <Modal class="modal modal1" v-model="modal1" title="温馨提示" width="500" class-name="vertical-center-modal" :closable="false">
        <p class="py1">您正在使用销毁模型功能，销毁后模型无法找回。</p>
        <div class="m-btn">
          <i-button class="cbtn del-btn" type="primary" @click="delData">立即销毁</i-button>
          <i-button class="cbtn cancel-btn" @click="cancelCs">取消</i-button>
        </div>
        <div class="modal-footer" slot="footer"></div>
      </Modal>
      
      <Modal class="modal modal2" v-model="modal2" title="阶段模型" width="820" class-name="vertical-center-modal" :closable="false">
        <i-form class="data-ctr" inline>
          <form-item>
            <i-button class="down-model-btn" type="primary" @click="downModel" :disabled="!isDownModel2">下载模型</i-button>
            <i-button class="destroy-btn" type="warning" @click="showModal3" :disabled="!isDelData2">销毁数据</i-button>
          </form-item>
        </i-form>
        <i-table class="mb10" :class="{loading: tbLoading2}" :columns="columns2" :data="list2" size="small" border ref="selection" :row-class-name="trActive2" @on-selection-change="changeTable2" no-data-text="没有相关数据"></i-table>
        <div class="page-w" v-if="dataTotal2 > 0">
          <Page :total="dataTotal2" :page-size="pageSize2" :current="currentPage2" @on-change="changePage2" show-total
            show-elevator />
        </div>
        <div class="modal-footer" slot="footer"></div>
      </Modal>
      
      <Modal class="modal modal3" v-model="modal3" title="温馨提示" width="500" class-name="vertical-center-modal" :closable="false">
        <p class="py1">您正在使用销毁模型功能，销毁后模型无法找回。</p>
        <div class="m-btn">
          <i-button class="cbtn del-btn" type="primary" @click="delData2">立即销毁</i-button>
          <i-button class="cbtn cancel-btn" @click="cancelCs2">取消</i-button>
        </div>
        <div class="modal-footer" slot="footer"></div>
      </Modal>
      
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          tbLoading: false,
          tbLoading2: false,
          currentPage: 1,
          currentPage2: 1,
          pageSize: 10,
          pageSize2: 10,
          dataTotal: 0,
          dataTotal2: 0,
          tableSelectArr: [],
          tableSelectArr2: [],
          modal1: false,
          modal2: false,
          modal3: false,
          dateActive: 0,
          storageSize: 0,
          isQuery2: false,
          rowId: -1,
          query: {
            timeBegin: null,
            timeEnd: null,
            cTime: [],
            queryTime: 0,
          },
          query2: {
            taskId: null,
            trainingCode: null,
          },
          dateChose: ['全部', '本月', '上月', '最近3月'],
          columns1: [{
              type: 'selection',
              width: 45,
              align: 'center'
            },
            {
              title: '任务编号',
              key: 'taskId',
              width: 170,
              tooltip: true,
              align: 'center',
            },
            {
              title: '训练编号',
              key: 'trainingCode',
              width: 170,
              tooltip: true,
              align: 'center',
            },
            {
              title: '训练时间',
              key: 'createTime',
              minWidth: 130,
              tooltip: true,
              align: 'center',
              render(h, params) {
                var time = G.getFormatTime(params.row.createTime).slice(0,-3)
                return h('div', time)
              },
            },
            {
              title: '训练时长',
              key: 'taskH',
              width: 110,
              tooltip: true,
              align: 'center',
              render(h, params) {
                var time = G.fM(params.row.taskH)
                return h('div', time)
              },
            },
            {
              title: '当前状态',
              key: 'status',
              width: 80,
              tooltip: true,
              align: 'center',
              render(h, params) {
                var state = params.row.status
                var txtObj = {
                  '0': '等待中',
                  '1': '队列中',
                  '2': '训练中',
                  '3': '已终止',
                  '4': '已完成',
                  '8': '扩容中',
                  '9': '处理中',
                }
                var text = txtObj[state]
                return h('div', text)
              },
            },
            {
              title: '模型',
              key: 'modelName',
              width: 100,
              tooltip: true,
              align: 'center',
            },
            {
              title: '数据集',
              key: 'contentName',
              width: 150,
              tooltip: true,
              align: 'center',
            },
            {
              title: '使用算力(TH)',
              key: 'payTh',
              width: 150,
              tooltip: true,
              align: 'center',
            },
            {
              title: '模型大小',
              key: 'size',
              width: 100,
              tooltip: true,
              align: 'center',
              render: (h, params) => {
                var size = G.getfGMK(params.row.size)
                return h('div', size)
              }
            },
            {
              title: ' ',
              key: 'axpu',
              width: 85,
              tooltip: true,
              align: 'center',
              className: 'axps',
              render: (h, params) => {
                return h('div', {
                  on: {
                    click: () => {
                      this.rowId = params.row.trainingCode
                      this.modal2 = true
                      this.requestList2()
                    }
                  }
                }, '阶段模型')
              }
            },
          ],
          columns2: [{
              type: 'selection',
              width: 45,
              align: 'center'
            },
            {
              title: '生成时间',
              key: 'createTime',
              minWidth: 140,
              tooltip: true,
              align: 'center',
              render(h, params) {
                var time = G.getFormatTime(params.row.createTime).slice(0,-3)
                return h('div', time)
              },
            },
            {
              title: '阶段',
              key: 'phases',
              width: 140,
              tooltip: true,
              align: 'center',
            },
            {
              title: '精准度',
              key: 'accuracy',
              width: 140,
              tooltip: true,
              align: 'center',
            },
            {
              title: 'loss',
              key: 'loss',
              width: 140,
              tooltip: true,
              align: 'center',
            },
            {
              title: '模型大小',
              key: 'size',
              width: 140,
              tooltip: true,
              align: 'center',
              render: (h, params) => {
                var size = G.getfGMK(params.row.size)
                return h('div', size)
              }
            },
          ],
          list: [],
          list2: [],
        }
      },
      methods: {
        init() {
          this.requestList()
          this.getStoreSize()
        },
        
        trActive(row, index) {
          if (row._checked) {
            return 'my-row-active'
          }
        },
        trActive2(row, index) {
          if (row._checked) {
            return 'my-row-active'
          }
        },
        clickQuery() {
          this.currentPage = 1
          this.dateActive = 0
          this.query2.taskId = null
          this.query2.trainingCode = null
          this.isQuery2 = false
          this.requestList()
        },

        clickQuery2() {
          this.currentPage = 1
          this.dateActive = 0
          this.query.queryTime = null
          this.query.cTime = []
          this.query.timeBegin = null
          this.query.timeEnd = null
          this.requestList(this.query2)
        },
        
        // 左侧选择日期查询
        choseTabDate(index) {
          var arr = [0, 1, 2, 3];
          this.dateActive = index
          this.query.queryTime = arr[index]
          this.query.cTime = []
          this.query.timeBegin = null
          this.query.timeEnd = null
          this.currentPage = 1
          
          this.isQuery2 = false
          this.query2.taskId = null
          this.query2.trainingCode = null
          this.requestList()
        },
        
        // 查询数据
        requestList(query) {
          query = query || this.query
          var realUrl = '/modelManagement/getModelManagement';
          var mockUrl = 'http://192.168.1.221/modelManagement/getModelManagement' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var ydata = {
            currentPage: this.currentPage,
            pageSize: this.pageSize || 1,
          }
          var data = Object.assign(query, ydata)
          data = G.paramsSerializer(data)
          
          this.tbLoading = true
          // 立即提交
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.tbLoading = false
                var d = res.data.data
                this.dataTotal = d.total
                this.list = d.list.map(v => {
                  v._checked = false
                  v.rid = this.getRandNum()
                  return v
                })
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        
        // 阶段模型
        requestList2() {
          var realUrl = '/modelManagement/getModelManagementdDetails/';
          var mockUrl = 'http://192.168.1.221/modelManagement/getModelManagementdDetails/' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var ydata = {
            trainingCode: this.rowId,
            currentPage: this.currentPage2,
            pageSize: this.pageSize2 || 1,
          }
          data = G.paramsSerializer(ydata)
          
          this.tbLoading2 = true
          // 立即提交
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.tbLoading2 = false
                var d = res.data.data
                this.dataTotal2 = d.total
                this.list2 = d.list.map(v => {
                  v._checked = false
                  v.rid = this.getRandNum()
                  return v
                })
                console.log(this.list2)
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        
        getRandNum() {
          return Math.floor((Math.random() * (1e8 - 1e3 + 1)) + 1e3);
        },
        
        // 下载模型
        downModel() {
          var realUrl = 'http://113.204.194.88:8089/ipfs/';
          var mockUrl = 'http://192.168.1.221:8080/ipfs/' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var hashId = this.tableSelectArr.map(v => v.hash).join()
          location.href = url + hashId
        },
        
        // 下载日志
        downLog() {
          var realUrl = '/modelManagement/files/exportTaskCallbackLog';
          var mockUrl = 'http://192.168.1.221/modelManagement/files/exportTaskCallbackLog' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var data = {
            taskIds: this.tableSelectArr.map(v => {
              return v.taskId
            }),
          }
          data = G.paramsSerializer(data)
          location.href = url + '?' + data
        },
        
        // 销毁数据
        deleteData() {
          var realUrl = '/modelManagement/delete';
          var mockUrl = 'http://192.168.1.221/modelManagement/delete' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var data = {
            taskIds: this.tableSelectArr.map(v => {
              return v.taskId
            }),
            trainingCodes: this.tableSelectArr.map(v => {
              return v.trainingCode
            }),
          }
          data = G.paramsSerializer(data)
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.$Message.success('销毁成功')
                this.requestList()
              } else {
                this.$Message.error(res.data.message)
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        deleteData2() {
          var realUrl = '/modelManagement/delete';
          var mockUrl = 'http://192.168.1.221/modelManagement/deleteId' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var data = {
            ids: this.tableSelectArr2.map(v => {
              return v.id
            }),
          }
          data = G.paramsSerializer(data)
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.$Message.success('销毁成功')
                this.requestList2()
              } else {
                this.$Message.error(res.data.message)
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

        
        // 查询存储数据
        getStoreSize() {
          axios.get('/dataManager/getUseSpace')
          .then(res => {
            if (res.data.code == 1) {
              this.storageSize = res.data.data
            }
          })
          .catch(err => {
            console.log(err);
          })
        },
        
        // 重置表单
        formReset() {
          this.query2 = {
            taskId: null,
            trainingCode: null,
          }
        },

        setDateRange(arr) {
          this.query.timeBegin = arr[0]
          this.query.timeEnd = arr[1]
        },
        
        // 复选框勾选
        changeTable(selection) {
          this.tableSelectArr = selection
        },
        changeTable2(selection) {
          this.tableSelectArr2 = selection
        },
        showModal1() {
          this.modal1 = true
        },
        showModal3() {
          this.modal3 = true
        },
        delData() {
          this.modal1 = false
          this.deleteData()
        },
        delData2() {
          this.modal3 = false
          this.deleteData2()
        },
        cancelCs() {
          this.modal1 = false
        },
        cancelCs2() {
          this.modal3 = false
        },

        // 分页
        changePage(page) {
          this.currentPage = page
          if (this.isQuery2) {
            this.requestList(this.query2)
          } else {
            this.requestList()
          }
        },
        changePage2(page) {
          this.currentPage2 = page
          this.requestList2()
        },
        isTableSomeSelected() {
          return this.tableSelectArr.length !== 0 && this.list.length
        },
        isTableSomeSelected2() {
          return this.tableSelectArr2.length !== 0 && this.list2.length
        },
        isTableOneSelected() {
          return this.tableSelectArr.length === 1 && this.list.length
        },
        isTableOneSelected2() {
          return this.tableSelectArr2.length === 1 && this.list2.length
        },
      },
      computed: {
        isDownModel() {
          return this.isTableOneSelected()
        },
        isDownModel2() {
          return this.isTableOneSelected2()
        },
        isDownLog() {
          return this.isTableSomeSelected()
        },
        isDelData() {
          return this.isTableSomeSelected()
        },
        isDelData2() {
          return this.isTableSomeSelected2()
        },
        // 判断存储空间是否不足
        isStorageLack() {
          return this.storageSize > 9 * 1024 * 1024
        },
        getFormtStorageSize() {
          return G.getfGMK(this.storageSize)
        },
      },
      watch: {
        list(newVal) {
          if (newVal.length === 0) {
            this.tableSelectArr = []
          }
        },
        tableSelectArr: {
          handler(newVal) {
            this.list.forEach(v => {
              v._checked = false
            })
            newVal.forEach(v => {
              this.list.forEach(cur => {
                if (cur.rid == v.rid) {
                  cur._checked = true
                }
              })
            })
          },
          deep: true,
        },
        tableSelectArr2: {
          handler(newVal) {
            this.list2.forEach(v => {
              v._checked = false
            })
            newVal.forEach(v => {
              this.list2.forEach(cur => {
                if (cur.rid == v.rid) {
                  cur._checked = true
                }
              })
            })
          },
          deep: true,
        },
      },
      mounted() {
        this.init()
      },
    })
  </script>
</body>

</html>